<template>
	<view class="popup" v-if="visible" @touchmove.stop.prevent @click="cancel">
		<up-transition :show="true">
			<view class="panel" @touchmove.stop.prevent @click.stop>
				<view class="panel-head">绑定身份信息</view>
				<view class="panel-tips">
					<!-- 为了保证您的账号数据不遗漏，请绑定身份信息 -->
					<view class="panel-tips-tag">为了保证用户数据，请绑定身份信息</view>
				</view>
				<view class="panel-info">
					<view class="panel-info-item">
						<view class="panel-info-item-left">真实姓名</view>
						<view class="panel-info-item-right">
							<u-input v-model="form.identity_name" border="none" placeholder="请输入您的真实姓名"
								:customStyle="{ padding: '0px' }" inputAlign="left" :placeholderStyle="placeholderStyle"
								fontSize="28rpx" color="#000000" :adjustPosition="false" />
						</view>
					</view>
					<view class="panel-info-item">
						<view class="panel-info-item-left">身份证号</view>
						<view class="panel-info-item-right">
							<u-input v-model="form.identity_card" border="none" placeholder="请输入您的身份证号"
								:customStyle="{ padding: '0px' }" inputAlign="left" :placeholderStyle="placeholderStyle"
								fontSize="28rpx" color="#000000" :adjustPosition="false" />
						</view>
					</view>
				</view>
				<view class="panel-footer">
					<view class="panel-footer-btn panel-footer-cancel" @click="cancel">取消</view>
					<view class="panel-footer-btn panel-footer-confirm" @click="confirm">绑定身份</view>
				</view>
			</view>
		</up-transition>
	</view>
</template>

<script lang="ts" setup>
	import api from "@/api"
	const emit = defineEmits(['closed', 'success', 'account'])
	const visible = ref(false)
	const placeholderStyle = ref('font-size: 28rpx;color: #B5B5B5;')
	const form = ref({
		identity_card: "",
		identity_name: ""
	})
	const confirm = async () => {
		if (!form.value.identity_name) {
			uni.showToast({
				title: "请输入您的真实姓名",
				icon: "none"
			})
			return
		}
		const regax = new RegExp(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/)
		if (!regax.test(form.value.identity_card)) {
			uni.showToast({
				title: "请输入正确的身份证号码",
				icon: "none"
			})
			return
		}
		const buildData = {
			...form.value
		}
		const res = await api.user.user.bindIdentityCard.post(buildData)
		if (res?.code === 1) {
			visible.value = false
			if (res.data.is_bind === 1) {
				emit("account", Object.assign({}, buildData, res.data))
			} else {
				emit("success", Object.assign({}, buildData, res.data))
			}
		}
	}
	const cancel = () => {
		visible.value = false
		emit("closed")
		return
	}
	const open = (params = {}) => {
		Object.assign(form.value, {
			identity_card: "",
			...params
		})
		visible.value = true
		return
	}
	defineExpose({ open })
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.panel {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(181, 181, 181, 0.1);
		border-radius: 16rpx;
		width: calc(100vw - 100rpx);
		padding: 40rpx 0 48rpx 0;
		overflow: hidden;
		position: relative;

		&-head {
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			margin-bottom: 32rpx;
			text-align: center;
		}

		&-tips {
			display: flex;
			align-items: center;
			justify-content: center;

			&-tag {
				background: #F4E4E5;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(181, 181, 181, 0.1);
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: var(--themeColors);
				line-height: 36rpx;
				padding: 16rpx 20rpx;
				margin: 0 auto;
				margin-bottom: 40rpx;
			}
		}

		&-info {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			margin-bottom: 58rpx;

			&-item {
				display: flex;
				align-items: center;
				padding: 22rpx 0;
				border-bottom: 2rpx solid #E5E5E5;

				&:nth-child(n+2) {
					margin-top: 24rpx;
				}

				&-left {
					width: 176rpx;
					display: flex;
					align-items: center;

					&::after {
						content: "*";
						font-weight: 400;
						font-size: 28rpx;
						color: var(--themeColors);
						line-height: 40rpx;
					}
				}

				&-right {
					width: calc(100% - 176rpx);
				}
			}
		}

		&-footer {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-btn {
				width: calc((100% - 26rpx) / 2 - 4rpx);
				height: 68rpx;
				border-radius: 8rpx;
				border: 2rpx solid #B5B5B5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			&-cancel {
				border: 2rpx solid #B5B5B5;
				color: #666666;
			}

			&-confirm {
				background: var(--themeColors);
				border: 2rpx solid var(--themeColors);
				color: #FFFFFF;
			}
		}
	}
</style>
